<!DOCTYPE html>

<html lang="en">


<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/comonTabA.css">
	<link rel="stylesheet" type="text/css" href="css/comon0.css">
	<link rel="stylesheet" type="text/css" href="css/comon.css">
	<!-- 2. 引入样式 -->
	<link rel="stylesheet" href="js/elementIndex.css">
	<link rel="stylesheet" href="js/elementUI.css">

	<!-- 引入 Element UI 的样式 -->
	<link rel="stylesheet" href="css/index.css">
	<script src="./js/jquery.js"></script>

	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script> -->


	<script src="./js/calendarJS.js"></script>
	<link rel="stylesheet" href="css/calendar.css">



	<script src="js/axios.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/element.js"></script>
	<script src="js/echarts.js"></script>


</head>

<script>
	$(window).load(function () {
		// $(".loading").fadeOut()
	})
</script>

<body>
	<!-- 引入 Vue.js -->
	<script src="js/vue.js"></script>
	<!-- 引入 Element UI -->
	<script src="js/index.js"></script>
	<!-- 
		<div class="loading">
			<div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
		</div> -->
	<div id="app">

		<ul class="popup">
			<div>
				<ul class="boxLeft">
					<div class="list-item-out">
						<ol id="dynamic-list">
							<!-- 动态内容将通过 JavaScript 插入到这里 -->
						</ol>
					</div>
				</ul>

			</div>


			<div>
				<div style="position: relative;width:80rem;height: 5rem;left:1.8rem;position: relative;z-index: 20;">
					<!-- 顶部按钮 -->
					<div>

						<div style="float: left; margin-top: 1rem; width:rem;">
							<el-select v-model="selectedRoom" @change="changeSelectRoom" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>

						<div style="float: left; margin-left: 2rem; margin-top: 1rem;">
							<div class="left-top-DatePicker">
								<el-date-picker popper-class="elDatePicker" v-model="selectedDate" type="date"
									placeholder="选择日期" :clearable="false" value-format="yyyy-MM-dd"
									:picker-options="pickerOptions1" @change="changeSelectDate">
								</el-date-picker>
							</div>
						</div>

					</div>

				</div>
			</div>

			<div>
				<div class="outer-container">
					<div class="inner-container">
						手术中</div>
					<div class="tab-container">
						<div id="tab1" class="tabOper">
							<span id="tab1-text">手术信息</span>
							<div id="tab1-div" onclick="switchTab('tab2')">
								<!-- 手术信息界面 -->
							</div>

						</div>
						<div id="tab2" class="tabOper" onclick="switchTab('tab2')">
							<span id="tab2-text">患者生命体征</span>
							<div id="tab2-div">
								<!-- 生命体征界面 -->
							</div>
						</div>



					</div>

					<div id="tabShow1" style="width: 100%;height:40rem;position: absolute;">
						<ul class="boxRight" id="content-display">

							<div id="loading2" class="loading2">
								<div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
							</div>
							<div id="loading3" style="display: none" class="loading2">
								<div class="loadbox"><img src="picture/xinxi.png"> 该房间没有手术</div>
							</div>
							<div class="boxRight0" id="sequenceOper">
								---
							</div>

							<!--    <div class="operState">
							    
							</div> -->

							<div class="boxRightTop" id="operName">
								--该手术室暂无手术--
							</div>

							<!-- 患者信息界面 -->
							<div class="boxRightPatientInfo">
								<div class="boxRightPatientInfoName">
									患者信息
								</div>
								<div class="Name" id="patientName">
									姓名：&nbsp;&nbsp;<!-- 李三妹 -->
								</div>
								<div class="NameOrsex" id="patientSex">
									性别：&nbsp;&nbsp;<!-- 女 -->
								</div>
								<div class="NameOrAge" id="patientAge">
									年龄：&nbsp;&nbsp;<!-- 83 -->
								</div>
								<div class="NameOrId" id="patientId">
									住院号: &nbsp;&nbsp;<!-- 184815 -->
								</div>

							</div>

							<!-- 手术人员信息界面 -->
							<div class="boxRightOperUserInfo">
								<div class="boxRightPatientInfoName">
									医护信息
								</div>
								<div class="Name" id="doctorName">
									主刀：&nbsp;&nbsp;<!-- 张兰兰 -->
								</div>
								<div class="NameOrsex" id="doctorAn">
									麻醉：&nbsp;&nbsp;<!-- 张立身 -->
								</div>
								<div class="NameOrAge" id="tourNurse">
									巡回：&nbsp;&nbsp;<!-- 武义 -->
								</div>
								<div class="NameOrId" id="washNurse">
									洗手：&nbsp;&nbsp;<!-- 刘彤 -->
								</div>
							</div>

							<div class="boxRightOperGoingInfo">
								<div class="boxRightTime" id="boxRightTimeOpId">
									<!--   手术时长 -->&nbsp;&nbsp;&nbsp;&nbsp;<!-- 01:45:00 -->
								</div>
								<div class="boxRightTimeAn" id="boxRightTimeAnId">
									<!--  麻醉时长 -->&nbsp;&nbsp;&nbsp;&nbsp;<!-- 02:39:00 -->
								</div>
								<div class="boxRightProcessTimeDiv1"></div>
								<div class="boxRightProcessTimeDiv2"></div>
								<div class="boxRightProcessTimeDiv3"></div>
								<div class="boxRightProcessTimeDiv4"></div>
								<div class="boxRightProcessTimeDiv5"></div>
								<div class="boxRightProcessTimeDiv6"></div>
								<div class="boxRightProcessTimeDiv7"></div>

								<div class="boxRightProcessTextDiv7">出手术室</div>
								<div class="boxRightProcessTextDiv6">麻醉结束</div>
								<div class="boxRightProcessTextDiv5">手术结束</div>
								<div class="boxRightProcessTextDiv4">手术开始</div>
								<div class="boxRightProcessTextDiv3">麻醉开始</div>
								<div class="boxRightProcessTextDiv2">进手术室</div>
								<div class="boxRightProcessTextDiv1">接台任务</div>

								<div class="boxRightProcess">
									<div class="progress">
										<div class="percent"></div>
									</div>
									<div class="steps">
										<div class="step" id="0"></div>
										<div class="step" id="1"></div>
										<div class="step" id="2"></div>
										<div class="step" id="3"></div>
										<div class="step" id="4"></div>
										<div class="step" id="5"></div>
										<div class="step" id="6"></div>

									</div>
								</div>

							</div>

							<div class="boxRightVitalSignInfo">
								<div class="boxRightVitalSignText">
									患者生命体征值
								</div>
								<div class="boxRightVitalSignTextSJ" id="SignTextSJ">
									<!-- 2024-08-19 13:49:59 -->
								</div>
								<div class="hr">
									HR
									<div class="hrDate" id="hr">

									</div>
								</div>
								<div class="bp">
									BP
									<div class="bpDate" id="bp">

									</div>
								</div>
								<div class="spo2">
									SPO2
									<div class="spo2Date" id="spo2">

									</div>

								</div>
								<div class="etco2">
									ETCO2
									<div class="etco2Date" id="etco2">

									</div>
								</div>
							</div>

							<div class="vioce1">
								<!-- 手术室监控 -->
								<div class="vioce1Name">
									全景监控
								</div>
								<div class="vioce1Time">
									--:--:--
								</div>
								<div class="vioce1Date">
									暂无视频
								</div>
							</div>

							<div class="vioce2">
								<div class="vioce1Name">
									术野监控
								</div>
								<div class="vioce1Time">
									--:--:--
								</div>
								<!-- 手术刀监控 -->
								<div class="vioce2Date">
									暂无视频
								</div>

							</div>

							<div class="boxRightLast">
								<!-- 资产耗材推送消息 -->
								<div class="square">
									事件广场
								</div>

								<!-- 
								1. 人员进场，医生，护士，麻醉等
								2. 设备使用
								3. 标本采集
								4. 耗材使用
								5. 输血使用
								6. 器械使用 -->
								<div class="squareTitle">
									<li>
										<button id="btn1" class="custom-button1 active">人员进场</button>
									</li>
									<li class="buttonTitle">
										<button id="btn2" class="custom-button2">设备使用</button>
									</li>
									<li class="buttonTitle">
										<button id="btn3" class="custom-button3">标本采集</button>
									</li>
									<li class="buttonTitle">
										<button id="btn4" class="custom-button4">耗材使用</button>
									</li>
									<li class="buttonTitle">
										<button id="btn5" class="custom-button5">输血使用</button>
									</li>
									<li class="buttonTitle">
										<button id="btn6" class="custom-button6">器械使用</button>
									</li>

								</div>


								<div class="squareMiddle">

									<div id="squareDiv">

									</div>

								</div>
							</div>

						</ul>
					</div>


					<div id="tabShow2" style="width: 100%; border-color:#20282E;
						height:47.5rem;background-color: #20282E;position: absolute;padding: 2rem;box-sizing: border-box;">
						<iframe id="iframeMain" width="100%" height="100%"></iframe>
					</div>



				</div>


			</div>



	</div>

	</ul>

	</div>
	</div>


	<script type="text/javascript">

		var httpUrl = "";

		$(document).ready(function () {
			var hospitalSwitch = '005';//医院接口选择 000-测试  001-华山西院  002-深圳儿童  003-公网 004-华西 005 北京积水潭


			if (hospitalSwitch === "000") {
				httpUrl = "http://localhost:82/"
			}
			else if (hospitalSwitch === "001") {
				httpUrl = "http://172.19.44.5:80"

			} else if (hospitalSwitch === "002") {
				httpUrl = "http://172.16.14.196:82"

			} else if (hospitalSwitch === "003") {
				httpUrl = "http://121.37.233.118:82"

			} else if (hospitalSwitch === "004") {
				httpUrl = "http://172.29.1.16:80"
			} else if (hospitalSwitch === "005") {
				httpUrl = "http://222.71.175.10:1111"
			}


		});

		new Vue({

			el: '#app',
			data: function () {
				return {
					selectedRoom: "", // 选中的房间
					selectedDate: "", // 选中的日期
					options: [],
					pickerOptions1: {
						firstDayOfWeek: 1, // 周一为每周的第一天
						disabledDate(time) {
							// 禁用今天及之后的日期
							return time.getTime() >= Date.now();
						}
					},
				}

			},

			created() {
				// 获取路由参数或其他方式传入的初始值
				const roomBefore = this.getQueryParam('roomNo');
				const dateBefore = this.getQueryParam('operDate');

				// 设置初始值
				this.selectedRoom = roomBefore || "";
				this.selectedDate = dateBefore || "";
			},
			mounted() {

				setTimeout(() => {

					this.getRoomList();
				}, 100);
			},
			methods: {
				changeSelectDate() {
					// 处理日期选择变化
					console.log('选中的日期：', this.selectedDate);
					console.log('选中的房间：', this.selectedRoom);

					let urlFirst = httpUrl + `/oriot_op/api/comprehensiveSituationMap/getRoomOper?roomNumber=${this.selectedRoom}&operDate=${this.selectedDate}`;
					fetchDataAndRender(urlFirst)

				},
				changeSelectRoom() {
					// 处理房间选择变化
					console.log('选中的房间：', this.selectedRoom);
					console.log('选中的日期：', this.selectedDate);
					//重新渲染整个页面
					let urlFirst = httpUrl + `/oriot_op/api/comprehensiveSituationMap/getRoomOper?roomNumber=${this.selectedRoom}&operDate=${this.selectedDate}`;
					fetchDataAndRender(urlFirst)
				},
				getQueryParam(name) {
					// 获取 URL 参数的辅助函数
					const urlParams = new URLSearchParams(window.location.search);
					return urlParams.get(name);
				},

				getRoomList() {
					const url =
						httpUrl + '/oriot_op/api/comprehensiveSituationMap/getAllRoomsBySurgicalNumber';

					let self = this;
					const requestData = {
						roomNumber: this.selectedRoom,
					};
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: requestData,
						success(rep) {
							console.log(rep)
							if (rep.code == '1') {
								self.options = rep.data;
							}
						},
						error(err) {
							console.log('请求失败')
						}


					});

				}


			},

		})
	</script>

	<script>
		$(document).ready(function () {
			var whei = $(window).width()
			$("html").css({
				fontSize: whei / 121
			})
			$(window).resize(function () {
				var whei = $(window).width()
				$("html").css({
					fontSize: whei / 121
				})
			});
		});
	</script>



	<script>


		// 为第一个 div 添加点击事件
		document.getElementById('tab1').addEventListener('click', function () {
			document.getElementById('tabShow1').style.display = 'block';
			document.getElementById('tabShow2').style.display = 'none';

			document.getElementById('tab1-text').style.color = '#1293D2';
			document.getElementById('tab2-text').style.color = '#B0B8CD';


			document.getElementById('tab1-div').style.display = 'block';
			document.getElementById('tab2-div').style.display = 'none';

		});

		document.getElementById('tab2').addEventListener('click', function () {
			document.getElementById('tabShow2').style.display = 'block';
			document.getElementById('tabShow1').style.display = 'none';

			document.getElementById('tab2-text').style.color = '#1293D2';
			document.getElementById('tab1-text').style.color = '#B0B8CD';

			document.getElementById('tab2-div').style.display = 'block';
			document.getElementById('tab1-div').style.display = 'none';
		});




		let timerId = null; // 用于存储计时器的ID
		let timerId2 = null; // 用于存储计时器的ID
		let globalData = {}; // 全局 JSON 对象，用于存储从第二个接口获取的数据

		//获得传参
		function getQueryString(name) {
			let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			let r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return decodeURIComponent(r[2]);
			}
			return null;
		}

		function iframeShow(opId) {
			const iframe = document.getElementById('iframeMain');
			var iframeWidth = iframe.clientWidth;
			var iframeHeight = iframe.clientHeight;
			iframe.src = httpUrl + '/oriot_op/api/screen/patientSignsHistory?opId=' + opId + '&width=' + iframeWidth + '&height=' + iframeHeight;
		}




		window.onload = function () {
			const tabShow2 = document.getElementById('tabShow2');
			const iframe = document.getElementById('iframeMain');

			var iframeWidth = iframe.clientWidth;
			var iframeHeight = iframe.clientHeight;

			let roomNo = getQueryString('roomNo');
			console.log(roomNo);


			// 获取 operDate 参数
			let operDate = getQueryString('operDate');
			console.log("Original operDate:", operDate);

			// 如果 operDate 为空，则使用今天的日期
			if (!operDate || operDate === 'null') {
				const today = new Date();
				operDate = today.toISOString().split('T')[0]; // 格式化为 yyyy-mm-dd
			}

			// URL 拼接
			let urlFirst = `${httpUrl}/oriot_op/api/comprehensiveSituationMap/getRoomOper?roomNumber=${roomNo}&operDate=${operDate}`;
			fetchDataAndRender(urlFirst);

			// 调用第一个接口获取数据
		};



		/* 数据更新渲染 */
		function updateContentDisplay(opIdInfo) {
			let SquareInfo = [];

			console.log(`您点击了: ${opIdInfo}`);

			document.getElementById('loading3').style.display = 'none';
			document.getElementById('loading2').style.display = 'none';

			// 默认选中“人员进场”按钮并高亮显示
			const btn1 = document.getElementById('btn1');
			const allButtons = document.querySelectorAll('.custom-button1, .custom-button2, .custom-button3, .custom-button4, .custom-button5, .custom-button6');
			allButtons.forEach(button => {
				button.classList.remove('active');
			});
			btn1.classList.add('active');






			// 获取全局 JSON 对象中的数据

			const fetchedData = globalData[opIdInfo];
			const operNameAndSequence = globalData[opIdInfo];

			// 获取页面中的内容显示区元素
			const contentDisplay = document.getElementById('content-display');

			// 获取 patient-info 下的各个 div 元素，并更新内容
			const patientNameDiv = contentDisplay.querySelector('#patientName');
			const patientSexDiv = contentDisplay.querySelector('#patientSex');
			const inpatientNumberDiv = contentDisplay.querySelector('#patientId');
			const patientAgeDiv = contentDisplay.querySelector('#patientAge');

			if (fetchedData[0]) {
				if (patientNameDiv) {
					patientNameDiv.innerHTML = `姓名: &nbsp;&nbsp;&nbsp;${fetchedData[0].patientName || "暂无记录"}`;
				}
				if (patientSexDiv) {
					patientSexDiv.innerHTML = `性别: &nbsp;&nbsp;&nbsp;${fetchedData[0].patientSex === "1" ? "男" : "女"}`;
				};
				if (inpatientNumberDiv) {
					inpatientNumberDiv.innerHTML = `住院号:  &nbsp;&nbsp;&nbsp;${fetchedData[0].inpatientNumber || "暂无记录"}`;
				}
				//if (patientAgeDiv) patientAgeDiv.textContent = `患者年龄: ${fetchedData[0].patientAge || "暂无记录"}`;
				if (patientAgeDiv) {
					const patientAge = fetchedData[0].patientAge;

					// 设置文本内容
					patientAgeDiv.innerHTML = `年龄: &nbsp;&nbsp;&nbsp;${patientAge || "暂无记录"}`;

					// 判断年龄是否大于80或小于4，并设置样式
					if (patientAge && (patientAge > 80 || patientAge < 4)) {
						patientAgeDiv.style.color = 'red'; // 设置文本颜色为红色
					} else {
						patientAgeDiv.style.color = ''; // 清除颜色设置（如果需要）
					}
				}
			}

			// 获取 doctor-info 下的各个 div 元素，并更新内容
			const anesthesiaDoctorDiv = contentDisplay.querySelector('#doctorAn');
			const knifeDoctorNameDiv = contentDisplay.querySelector('#doctorName');
			const firstCircuitNurseDiv = contentDisplay.querySelector('#tourNurse');
			const firstWashNurseNameDiv = contentDisplay.querySelector('#washNurse');

			if (fetchedData[1]) {
				if (anesthesiaDoctorDiv) {
					let anesthesiaDoctor = fetchedData[1].anesthesiaDoctor || "";
					if (anesthesiaDoctor.length > 8) {
						anesthesiaDoctor = anesthesiaDoctor.substring(0, 8) + "...";
					}
					anesthesiaDoctorDiv.innerHTML = `麻醉: &nbsp;&nbsp;&nbsp; ${anesthesiaDoctor}`;
				}
				if (knifeDoctorNameDiv) {
					let knifeDoctorName = fetchedData[1].knifeDoctorName || "";
					if (knifeDoctorName.length > 8) {
						knifeDoctorName = knifeDoctorName.substring(0, 8) + "...";
					}
					knifeDoctorNameDiv.innerHTML = `主刀: &nbsp;&nbsp;&nbsp; ${knifeDoctorName}`;
				}

				if (firstCircuitNurseDiv) {
					let circuitNurse = fetchedData[1].circuitNurse || "";
					if (circuitNurse.length > 8) {
						circuitNurse = circuitNurse.substring(0, 8) + "...";
					}
					firstCircuitNurseDiv.innerHTML = `巡回: &nbsp;&nbsp;&nbsp; ${circuitNurse}`;
				}

				if (firstWashNurseNameDiv) {
					let washNurseName = fetchedData[1].washNurseName || "";
					if (washNurseName.length > 8) {
						washNurseName = washNurseName.substring(0, 8) + "...";
					}
					firstWashNurseNameDiv.innerHTML = `洗手: &nbsp;&nbsp;&nbsp; ${washNurseName}`;
				}
			}



			// 获取 vital-signs 下的各个 div 元素，并更新内容
			const bloodPressureDiv = contentDisplay.querySelector('#bp');
			const heartRateDiv = contentDisplay.querySelector('#hr');
			const etco2Div = contentDisplay.querySelector('#etco2');
			const spo2Div = contentDisplay.querySelector('#spo2');
			const vitalSignsTimeDiv = contentDisplay.querySelector('#SignTextSJ');

			if (fetchedData[2]) {
				if (bloodPressureDiv) bloodPressureDiv.textContent = ` ${fetchedData[2].BloodPressure || "--"}`;
				if (heartRateDiv) heartRateDiv.textContent = ` ${fetchedData[2].HeartRate || "--"}`;
				if (etco2Div) etco2Div.textContent = ` ${fetchedData[2].EtCO2 || "--"} `;
				if (spo2Div) spo2Div.textContent = `${fetchedData[2].SpO2 || "--"} `;
				if (vitalSignsTimeDiv) vitalSignsTimeDiv.textContent = `${fetchedData[2].time || "--"} `;
			}


			// 已经获取到接口的返回数据并保存在 fetchedData 中
			// 已经获取到接口的返回数据并保存在 fetchedData 中
			const squareDiv = document.querySelector('#squareDiv'); // 获取到 squareDiv 元素

			if (fetchedData && Array.isArray(fetchedData[5])) {
				const usageData = fetchedData[5]; // 获取到设备和物资使用记录的数组
				console.log(usageData);
				SquareInfo = usageData;

				// 移除旧的 class 和内容
				squareDiv.className = '';
				squareDiv.innerHTML = '';

				if (usageData.length > 0) {
					console.log("usageData数据:" + usageData)
					// 筛选出“-”前为“人员”的数据
					const filteredUsageData = usageData.filter(item => item.split('-')[0] === '人员');

					// 根据筛选结果执行不同操作
					if (filteredUsageData.length === 0) {
						// 执行操作 A
						console.log("筛选结果为空，执行操作 A");
						document.querySelector('#squareDiv').innerHTML = `
						<div class="no-data-message">
						暂无记录
						<img src=" ./picture/xinxi.png " alt="无记录图片" class="img">
						</div>`;

					} else {
						// 执行操作 B
						console.log("筛选结果有数据，执行操作 B");
						console.log("筛选后的数据:", filteredUsageData);
						// 动态生成 <div> 标签并插入到 squareDiv 中，添加类名以应用滚动条样式
						let usageContent = `<div class="custom-ul list-item-out2" style="width: 40rem;">`;
						filteredUsageData.forEach((item, index) => {
							// 去掉“人员-”
							const itemWithoutType = item.replace('人员-', '');
							// 替换第一个斜杠为六个空格
							const formattedItem = itemWithoutType.replace('/',
								'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							);
							// 设置背景颜色
							const bgColor = '#333F4B';
							usageContent +=
								`<div class="custom-li" style="background-color: ${bgColor};">${formattedItem}</div>`;
						});
						usageContent += '</div>';
						squareDiv.innerHTML = usageContent; // 将内容插入到 squareDiv 中

						// 获取滚动容器
						const customUl = squareDiv.querySelector('.custom-ul');

						// 设置初始的滚动速度
						let scrollSpeed = .5;// 滚动速度，单位：像素
						let animationFrameId;

						// 自动滚动函数
						function startScrolling() {
							function scroll() {
								// 每次增加 scrollTop 实现滚动
								customUl.scrollTop += scrollSpeed;
								// 当滚动到底部时，回到顶部
								if (customUl.scrollTop + customUl.clientHeight >= customUl.scrollHeight) {
									customUl.scrollTop = 0; // 立即回到顶部
								}
								animationFrameId = requestAnimationFrame(scroll);
							}
							animationFrameId = requestAnimationFrame(scroll);
						}

						// 停止滚动函数
						function stopScrolling() {
							cancelAnimationFrame(animationFrameId);
						}

						// 启动滚动
						startScrolling();

						// 可以添加鼠标悬停暂停滚动的功能
						customUl.addEventListener('mouseenter', stopScrolling);
						customUl.addEventListener('mouseleave', startScrolling);
					}

				} else {
					document.querySelector('#squareDiv').innerHTML = `
						<div class="no-data-message">
						暂无记录
						<img src=" ./picture/xinxi.png " alt="无记录图片" class="img">
						</div>`;
				}


			} else {
				// 如果数据获取失败或不是数组，设置 squareDiv 的 class 为 squareImg
				squareDiv.className = 'squareImg';
				squareDiv.innerHTML = '<div class="no-data-message">暂无记录</div>'; // 提示信息
			}

			/* 6个button */
			const buttons = document.querySelectorAll('button');
			buttons.forEach(button => {
				button.addEventListener('click', function () {
					buttons.forEach(btn => {
						btn.classList.remove('active');
					});
					this.classList.add('active');
					// 在这里添加你的业务逻辑，例如打印按钮文本
					console.log(this.textContent);
					let self = this;

					//	|| self.textContent === '耗材使用'
					if (self.textContent === '标本采集' || self.textContent === '输血使用' || self.textContent === '器械使用') {
						// 清空事件广场
						document.querySelector('#squareDiv').innerHTML = `
						<div class="no-data-message">
						暂无记录
						<img src=" ./picture/xinxi.png " alt="无记录图片" class="img">
						</div>`;

					}
					else {
						console.log("解析type - " + SquareInfo);

						// 初始化标志变量
						let hasPersonEntryData = false;
						let hasDeviceUsageData = false;
						let hasConsumableUsageData = false;

						// 遍历每条信息
						SquareInfo.forEach(info => {
							const parts = info.split('-');
							const type = parts[0];
							const content = parts.slice(1).join('-');
							console.log("遍历每条信息type  " + type);
							console.log("遍历每条信息self.textContent  " + self.textContent);

							if (type === '人员' && self.textContent === "人员进场") {
								hasPersonEntryData = true;
								point = '2';
								// 移除旧的 class 和内容
								squareDiv.className = '';
								squareDiv.innerHTML = '';

								if (SquareInfo.length > 0 && self.textContent === "人员进场") {
									// 筛选出“-”前为“人员”的数据
									const filteredUsageDataCase = SquareInfo.filter(item => item.split('-')[0] === '人员');
									// 动态生成 <div> 标签并插入到 squareDiv 中，添加类名以应用滚动条样式
									let usageContent = `<div class="custom-ul list-item-out2" style="width: 40rem;">`;
									filteredUsageDataCase.forEach((item, index) => {
										// 去掉“人员-”
										const itemWithoutType = item.replace('人员-', '');
										// 替换第一个斜杠为六个空格
										const formattedItem = itemWithoutType.replace('/',
											'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
										);
										// 设置背景颜色
										const bgColor = '#333F4B';


										let textColor = 'white';
										usageContent +=
											`<div class="custom-li" style="background-color: ${bgColor}; color: ${textColor};">${formattedItem}</div>`;

									});
									usageContent += '</div>';
									squareDiv.innerHTML = usageContent; // 将内容插入到 squareDiv 中

									// 获取滚动容器
									const customUl = squareDiv.querySelector('.custom-ul');

									// 设置初始的滚动速度
									let scrollSpeed = .5; // 滚动速度，单位：像素
									let animationFrameId;

									// 自动滚动函数
									function startScrolling() {
										function scroll() {
											// 每次增加 scrollTop 实现滚动
											customUl.scrollTop += scrollSpeed;
											// 当滚动到底部时，回到顶部
											if (customUl.scrollTop + customUl.clientHeight >= customUl.scrollHeight) {
												customUl.scrollTop = 0; // 立即回到顶部
											}
											animationFrameId = requestAnimationFrame(scroll);
										}
										animationFrameId = requestAnimationFrame(scroll);
									}

									// 停止滚动函数
									function stopScrolling() {
										cancelAnimationFrame(animationFrameId);
									}

									// 启动滚动
									startScrolling();

									// 可以添加鼠标悬停暂停滚动的功能
									customUl.addEventListener('mouseenter', stopScrolling);
									customUl.addEventListener('mouseleave', startScrolling);
								}
							}

							if (type === '设备' && self.textContent === "设备使用") {
								hasDeviceUsageData = true;
								// 移除旧的 class 和内容
								squareDiv.className = '';
								squareDiv.innerHTML = '';

								if (SquareInfo.length > 0) {
									// 筛选出“-”前为“设备”的数据
									const filteredUsageData = SquareInfo.filter(item => item.split('-')[0] === '设备');
									// 动态生成 <div> 标签并插入到 squareDiv 中，添加类名以应用滚动条样式
									let usageContent = `<div class="custom-ul list-item-out2" style="width: 40rem;">`;
									filteredUsageData.forEach((item, index) => {
										// 去掉“设备-”
										const itemWithoutType = item.replace('设备-', '');
										// 替换第一个斜杠为六个空格
										const formattedItem = itemWithoutType.replace('/',
											'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
										);
										/* 少几个空格 */
										const formattedItem2 = itemWithoutType.replace('/',
											'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp'
										);
										// 设置背景颜色
										const bgColor = '#333F4B';
										// 检查是否包含“未关机”字样
										let textColor = 'white';
										if (itemWithoutType.startsWith('未关机')) {
											textColor = '#ff9800';
											usageContent +=
												`<div class="custom-li" style="background-color: ${bgColor}; color: ${textColor};">${formattedItem2}</div>`;
										} else {
											usageContent +=
												`<div class="custom-li" style="background-color: ${bgColor}; color: ${textColor};">${formattedItem}</div>`;
										}

									});
									usageContent += '</div>';
									squareDiv.innerHTML = usageContent; // 将内容插入到 squareDiv 中

									// 获取滚动容器
									const customUl = squareDiv.querySelector('.custom-ul');

									// 设置初始的滚动速度
									let scrollSpeed = .5; // 滚动速度，单位：像素
									let animationFrameId;

									// 自动滚动函数
									function startScrolling() {
										function scroll() {
											// 每次增加 scrollTop 实现滚动
											customUl.scrollTop += scrollSpeed;
											// 当滚动到底部时，回到顶部
											if (customUl.scrollTop + customUl.clientHeight >= customUl.scrollHeight) {
												customUl.scrollTop = 0; // 立即回到顶部
											}
											animationFrameId = requestAnimationFrame(scroll);
										}
										animationFrameId = requestAnimationFrame(scroll);
									}

									// 停止滚动函数
									function stopScrolling() {
										cancelAnimationFrame(animationFrameId);
									}

									// 启动滚动
									startScrolling();

									// 可以添加鼠标悬停暂停滚动的功能
									customUl.addEventListener('mouseenter', stopScrolling);
									customUl.addEventListener('mouseleave', startScrolling);
								} else {
									// 如果数组为空，设置 squareDiv 的 class 为 squareImg，并添加提示信息
									squareDiv.className = 'squareImg';
									squareDiv.innerHTML = '<div class="no-data-message">暂无记录</div>'; // 提示信息
								}
							}

							//西院新增耗材
							if (type === '耗材' && self.textContent === "耗材使用") {
								hasConsumableUsageData = true;
								// 移除旧的 class 和内容
								squareDiv.className = '';
								squareDiv.innerHTML = '';

								if (SquareInfo.length > 0) {
									// 筛选出“-”前为“耗材”的数据
									const filteredUsageData = SquareInfo.filter(item => item.split('-')[0] === '耗材');
									// 动态生成 <div> 标签并插入到 squareDiv 中，添加类名以应用滚动条样式
									let usageContent = `<div class="custom-ul list-item-out2" style="width: 40rem;">`;
									filteredUsageData.forEach((item, index) => {
										// 去掉“耗材-”
										const itemWithoutType = item.replace('耗材-', '');
										// 替换第一个斜杠为六个空格
										const formattedItem = itemWithoutType.replace('/',
											'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
										);
										/* 少几个空格 */
										const formattedItem2 = itemWithoutType.replace('/',
											'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp'
										);
										// 设置背景颜色
										const bgColor = '#333F4B';
										// 检查是否包含“未关机”字样
										let textColor = 'white';
										usageContent +=
											`<div class="custom-li" style="background-color: ${bgColor}; color: ${textColor};">${formattedItem}</div>`;

									});
									usageContent += '</div>';
									squareDiv.innerHTML = usageContent; // 将内容插入到 squareDiv 中

									// 获取滚动容器
									const customUl = squareDiv.querySelector('.custom-ul');

									// 设置初始的滚动速度
									let scrollSpeed = .5; // 滚动速度，单位：像素
									let animationFrameId;

									// 自动滚动函数
									function startScrolling() {
										function scroll() {
											// 每次增加 scrollTop 实现滚动
											customUl.scrollTop += scrollSpeed;
											// 当滚动到底部时，回到顶部
											if (customUl.scrollTop + customUl.clientHeight >= customUl.scrollHeight) {
												customUl.scrollTop = 0; // 立即回到顶部
											}
											animationFrameId = requestAnimationFrame(scroll);
										}
										animationFrameId = requestAnimationFrame(scroll);
									}

									// 停止滚动函数
									function stopScrolling() {
										cancelAnimationFrame(animationFrameId);
									}

									// 启动滚动
									startScrolling();

									// 可以添加鼠标悬停暂停滚动的功能
									customUl.addEventListener('mouseenter', stopScrolling);
									customUl.addEventListener('mouseleave', startScrolling);
								} else {
									// 如果数组为空，设置 squareDiv 的 class 为 squareImg，并添加提示信息
									squareDiv.className = 'squareImg';
									squareDiv.innerHTML = '<div class="no-data-message">暂无记录</div>'; // 提示信息
								}
							}

						});

						// 根据标志变量判断是否显示暂无记录
						const tabName = self.textContent;
						const hasDataMap = {
							"人员进场": hasPersonEntryData,
							"设备使用": hasDeviceUsageData,
							"耗材使用": hasConsumableUsageData // 假设这里有对应的标志变量
						};

						// 检查当前标签是否存在于映射中且无数据
						if (hasDataMap[tabName] === false) {
							// 清空事件广场并显示暂无记录
							document.querySelector('#squareDiv').innerHTML = `
							<div class="no-data-message">
							暂无记录
							<img src=" ./picture/xinxi.png " alt="无记录图片" class="img">
							</div>`;
						}

					}

				});
			});







			/* 麻醉手术时间 */

			let clearOperTimer = () => { }; // 用于存储清理手术时长计时器的函数
			let clearAnesthesiaTimer = () => { }; // 用于存储清理麻醉时长计时器的函数
			let isUpdatingOperTime = false; // 手术时长更新锁
			let isUpdatingAnesthesiaTime = false; // 麻醉时长更新锁

			// 获取 operation-info 下的各个 div 元素，并更新内容
			const operTimeTypeDiv = document.getElementById('boxRightTimeOpId');
			const anesthesiaTimeTypeDiv = document.getElementById('boxRightTimeAnId');


			// 判断并新手术时长和麻醉时长
			if (fetchedData[3]) {
				// // 先清理之前的计时器
				// clearOperTimer();
				// clearAnesthesiaTimer();

				// 重置计时器清理函数
				clearOperTimer = () => { };
				clearAnesthesiaTimer = () => { };

				// 更新手术时长
				if (fetchedData[3].operTimeType === '未结束') {
					if (operTimeTypeDiv && !isUpdatingOperTime) {
						// isUpdatingOperTime = true; // 设置更新锁
						if (fetchedData[3].operTime === '00:00:00' || !fetchedData[3].operTime) {
							operTimeTypeDiv.innerHTML = '手术时长&nbsp;&nbsp;&nbsp--:--:--';
							// isUpdatingOperTime = false; // 释放更新锁
							startTimer(operTimeTypeDiv, fetchedData[3].operTime, '手术时长&nbsp;&nbsp;&nbsp', 0);

						} else {
							startTimer(operTimeTypeDiv, fetchedData[3].operTime, '手术时长&nbsp;&nbsp;&nbsp', 1);
						}
					}
				} else if (fetchedData[3].operTimeType === '已结束') {
					if (operTimeTypeDiv && !isUpdatingOperTime) {
						// isUpdatingOperTime = true; // 设置更新锁
						operTimeTypeDiv.innerHTML = `手术时长&nbsp;&nbsp;&nbsp${fetchedData[3].operTime}`;
						// isUpdatingOperTime = false; // 释放更新锁
					}
				}
				// 更新麻醉时长
				if (fetchedData[3].anesthesiaTimeType === '未结束') {
					if (anesthesiaTimeTypeDiv && !isUpdatingAnesthesiaTime) {
						// isUpdatingAnesthesiaTime = true; // 设置更新锁
						if (fetchedData[3].anesthesiaTime === '00:00:00' || !fetchedData[3].anesthesiaTime) {
							anesthesiaTimeTypeDiv.innerHTML = '麻醉时长&nbsp;&nbsp;&nbsp--:--:--';
							// isUpdatingAnesthesiaTime = false; // 释放更新锁
							startTimer(anesthesiaTimeTypeDiv, fetchedData[3].anesthesiaTime, '麻醉时长&nbsp;&nbsp;&nbsp', 2);

						} else {
							startTimer(anesthesiaTimeTypeDiv, fetchedData[3].anesthesiaTime, '麻醉时长&nbsp;&nbsp;&nbsp', 3);
						}
					}
				} else if (fetchedData[3].anesthesiaTimeType === '已结束') {
					if (anesthesiaTimeTypeDiv && !isUpdatingAnesthesiaTime) {
						// isUpdatingAnesthesiaTime = true; // 设置更新锁
						anesthesiaTimeTypeDiv.innerHTML = `麻醉时长&nbsp;&nbsp;&nbsp${fetchedData[3].anesthesiaTime}`;
						// isUpdatingAnesthesiaTime = false; // 释放更新锁/
					}
				}
			}


			// 计时函数
			function startTimer(element, startTime, prefix, flag) {
				// 检查 startTime 是否为空字符串
				if (startTime === '00:00:00' || !startTime) {
					element.innerHTML = `${prefix}--:--:--`;
					// unlockFunction(); // 释放更新锁
				}

				// 将时间字符串转换为Date对象
				let [hours, minutes, seconds] = startTime.split(':').map(Number);
				let startDate = new Date();
				startDate.setHours(hours, minutes, seconds, 0);


				// 更新显示时间的函数
				function updateTime() {
					// 获取当前时间
					let now = new Date();

					// 计算经过的时间（以秒为单位）
					let elapsedTime = Math.floor((now - startDate) / 1000);

					// 将经过的时间转换回HH:mm:ss格式
					let elapsedHours = String(Math.floor(elapsedTime / 3600)).padStart(2, '0');
					let elapsedMinutes = String(Math.floor((elapsedTime % 3600) / 60)).padStart(2, '0');
					let elapsedSeconds = String(elapsedTime % 60).padStart(2, '0');

					// 更新页面中的时间显示
					element.innerHTML = `${prefix}${elapsedHours}:${elapsedMinutes}:${elapsedSeconds}`;
				}
				// 更新显示时间的函数




				// 立即执行一次，避免延迟1秒后才更新显示
				if (flag === 1) {
					clearInterval(timerId)
					timerId = null
					document.getElementById('boxRightTimeOpId').innerHTML = '';
					timerId = setInterval(updateTime, 1000);
				}
				if (flag === 0) {
					document.getElementById('boxRightTimeOpId').innerHTML = '';
					clearInterval(timerId)
					timerId = null
					element.innerHTML = `${prefix}--:--:--`
				}
				if (flag === 3) {
					document.getElementById('boxRightTimeAnId').innerHTML = '';
					clearInterval(timerId2)
					timerId2 = null
					timerId2 = setInterval(updateTime, 1000);
				}
				if (flag === 2) {
					document.getElementById('boxRightTimeAnId').innerHTML = '';
					clearInterval(timerId2)
					timerId2 = null
					element.innerHTML = `${prefix}--:--:--`
				}


			}




			/* end */



			const operNameDiv = contentDisplay.querySelector('#operName');
			const operSequenceDiv = contentDisplay.querySelector('#sequenceOper');
			const listProcessNewDiv = contentDisplay.querySelector('#listProcess');


			if (fetchedData[4]) {
				if (operSequenceDiv) operSequenceDiv.textContent = `${fetchedData[4].sequence}`;
				if (operNameDiv) operNameDiv.textContent = `${fetchedData[4].operName}`;

				<!--进度条条-- >
		
				let els = document.getElementsByClassName('step');
				let steps = [];
		
				// 假设 listProcess 是你要遍历的数组
				let listProcess = fetchedData[4].result;
		
		
				Array.prototype.forEach.call(els, (e) => {
					steps.push(e);
					e.addEventListener('click', (x) => {
						progress(x.target.id);
					});
				});
		
		
				// 查找 id 最大且 type 为 1 的对象
				let targetItem = null;
				listProcess.forEach((item) => {
					if (item.type === 1) {
						if (!targetItem || item.id > targetItem.id) {
							targetItem = item;
						}
					}
				});
		
		
				// 如果没有找到 type 为 1 的对象，则将 id 为 1 的对象视为目标
				if (!targetItem) {
					targetItem = listProcess.find(item => item.id === 0);
		
				}
		
		
				// 触发与点击事件相同的效果
				if (targetItem) {
					progress(targetItem.id); // 调用 progress 函数，效果等同于点击 step 元素
				}
		
		
				function progress(stepNum) {
					// 清除所有渲染的数据和状态
					if (stepNum === 0) {
						document.getElementsByClassName('percent')[0].style.width = '0'; // 清空进度条
		
						// 遍历所有步骤，移除 'selected' 和 'completed' 类
						steps.forEach((e) => {
							e.classList.remove('selected', 'completed');
						});
		
						// 这里可以加入其他清除渲染数据的逻辑，例如清空内容区域
						//document.getElementById('contentArea').innerHTML = ''; // 假设有一个内容区域需要清空
		
						return; // 结束函数，不进行后续处理
					}
		
					// 正常的进度条计算和步骤处理逻辑
					let p = stepNum * 12.5 + 19.5;
					document.getElementsByClassName('percent')[0].style.width = `${p}%`;
		
					steps.forEach((e) => {
						if (e.id <= stepNum) {
							e.classList.add('completed');
						}
						if (e.id > stepNum) {
							e.classList.remove('selected', 'completed');
						}
					});
				}
		
		
		
				/* 球球上方的时间展示div id: 0 - 6   div: 1 - 7 */
				// 查找 id 为 0 且 type 为 1 的对象
				let targetProcess = listProcess.find(process => process.id === 0 && process.type === 1);
				// 获取 div 元素
				let processTimeDiv = document.querySelector('.boxRightProcessTimeDiv1');
				// 显示时间
				if (targetProcess) {
					processTimeDiv.textContent = targetProcess.time;
				} else {
					processTimeDiv.textContent = "";
				}

				let targetProcess2 = listProcess.find(process => process.id === 1 && process.type === 1);
				let processTimeDiv2 = document.querySelector('.boxRightProcessTimeDiv2');
				if (targetProcess2) {
					processTimeDiv2.textContent = targetProcess2.time;
				} else {
					processTimeDiv2.textContent = "";
				}

				let targetProcess3 = listProcess.find(process => process.id === 2 && process.type === 1);
				let processTimeDiv3 = document.querySelector('.boxRightProcessTimeDiv3');
				if (targetProcess3) {
					processTimeDiv3.textContent = targetProcess3.time;
				} else {
					processTimeDiv3.textContent = "";
				}

				let targetProcess4 = listProcess.find(process => process.id === 3 && process.type === 1);
				let processTimeDiv4 = document.querySelector('.boxRightProcessTimeDiv4');
				if (targetProcess4) {
					processTimeDiv4.textContent = targetProcess4.time;
				} else {
					processTimeDiv4.textContent = "";
				}

				let targetProcess5 = listProcess.find(process => process.id === 4 && process.type === 1);
				let processTimeDiv5 = document.querySelector('.boxRightProcessTimeDiv5');
				if (targetProcess5) {
					processTimeDiv5.textContent = targetProcess5.time;
				} else {
					processTimeDiv5.textContent = "";
				}

				let targetProcess6 = listProcess.find(process => process.id === 5 && process.type === 1);
				let processTimeDiv6 = document.querySelector('.boxRightProcessTimeDiv6');
				if (targetProcess5) {
					processTimeDiv6.textContent = targetProcess6.time;
				} else {
					processTimeDiv6.textContent = "";
				}

				let targetProcess7 = listProcess.find(process => process.id === 6 && process.type === 1);
				let processTimeDiv7 = document.querySelector('.boxRightProcessTimeDiv7');
				if (targetProcess7) {
					processTimeDiv7.textContent = targetProcess7.time;
				} else {
					processTimeDiv7.textContent = "";
				}


			}
			const loading = document.getElementById("loading2");
			loading.classList.add('loadingRemove')



		}
	</script>






	<script>
		function switchTab(tabId) {
			// 获取所有的 tab 内容 div
			var tab1Div = document.getElementById('tab1-div');
			var tab2Div = document.getElementById('tab2-div');

			// 根据点击的 tabId 切换显示内容
			if (tabId === 'tab1') {
				tab1Div.classList.add('active');
				tab2Div.classList.remove('active');
			} else if (tabId === 'tab2') {
				tab2Div.classList.add('active');
				tab1Div.classList.remove('active');
			}
		}
	</script>



	<script>



		//第二个
		function fetchSecondAPI(opIdInfo) {

			let fetchurl = httpUrl + `/oriot_op/api/comprehensiveSituationMap/getRoomOperInfo?OpIdInfo=${opIdInfo}`;


			fetch(fetchurl)//localhost
				.then(response => response.json())
				.then(data => {
					if (data.code === "1" && data.data !== "该房间没有手术") {//有真实数据
						// 将返回的数据存储在全局 JSON 对象中
						globalData[opIdInfo] = data.data;
						console.log("Fetched data for", opIdInfo, ":", data.data);
						// 更新 content-display 区域内容
						updateContentDisplay(opIdInfo);

						let parts = opIdInfo.split('-');
						if (parts.length < 3) {
							console.error("opIdInfo 格式不正确，无法找到第二个“-”后的数据");
							return;
						}
						let newParam = parts.slice(2).join('-'); // 取第二个“-”后的所有部分

						iframeShow(newParam);

					} else if (data.code === "1" && data.data === "该房间没有手术") {//无数据
						console.log("该房间没有手术");
						clearRightBox();
					} else {
						console.error("接口调用失败:", data.msg);
					}
				})
				.catch(error => {
					console.error("接口调用出错:", error);
				});
		}



		//第一个
		function fetchDataAndRender(urlFirst) {
			fetch(urlFirst)
				.then(response => response.json()) // 将响应转换为 JSON 格式
				.then(data => {
					if (data.code === "1") {
						if (data.data === "该房间没有手术") {
							console.log("该房间没有手术");
							clearRightBox(); // 使用新的清空方法
							return;
						} else if (Array.isArray(data.data)) {
							// 处理 data.data，将每个字符串截取到第二个 '-' 之前
							const listItems = data.data.map(item => {
								const renderedItem = item.split('-').slice(0, 2).join('-');
								const afterSecondDash = item.split('-').slice(2).join('-');

								console.log("renderedItem:", renderedItem);
								console.log("afterSecondDash:", afterSecondDash);

								// 替换并执行 iframeShow 方法 -- 嵌入的生命体征
								iframeShow(afterSecondDash);

								return {
									renderedItem,
									fullItem: item
								};
							});

							console.log("Processed listItems:", listItems);

							// 渲染列表项，传递 showOper 作为默认选中的项
							renderListItems(listItems, data.showOper);
						} else {
							console.error("接口返回的数据格式不正确：", data.data);
						}
					} else {
						console.error("接口调用失败：", data.msg);
					}
				})
				.catch(error => {
					console.error("接口调用出错：", error);
				});
		}



		/* 
		渲染列表项 (仅显示到第二个'-'之前de 数据) 且放到li标签给样式
		点击后变色 默认选择showOper对应的li 后续可能默认进入术中手术 
		*/
		function renderListItems(items, showOper) {

			if (items.length === 0) {
				//重新渲染
				clearRightBox();

			} else {
				const listContainer = document.getElementById('dynamic-list'); // 列表项的容器 id 为 'dynamic-list'
				// 清空容器内容
				listContainer.innerHTML = '';

				if (!listContainer) {
					console.error("List container not found!");
					return;
				}
				// 遍历每个项目，创建 <li> 元素并添加到容器中
				items.forEach((item, index) => {
					const listItem = document.createElement('li');
					listItem.textContent = item.renderedItem;
					listItem.classList.add('list-item'); // 为 <li> 元素添加 'list-item' 样式类

					// 为每个列表项添加点击事件处理程序，传递完整的 fullItem 内容f
					listItem.addEventListener('click', () => {
						clearInterval(timerId);
						clearInterval(timerId2);

						console.log("List item clicked:", item.fullItem);
						fetchSecondAPI(item.fullItem); // 传递完整的内容给第二个接口

						// 移除所有已选中的样式
						document.querySelectorAll('.list-item').forEach(li => li.classList.remove('selected'));

						// 为当前点击的项添加选中样式
						listItem.classList.add('selected');
					});

					// 将 <li> 元素添加到容器中
					listContainer.appendChild(listItem);

					// 如果该项与 showOper 匹配，则默认选中该项
					if (item.fullItem === showOper) {
						listItem.classList.add('selected');
						fetchSecondAPI(item.fullItem); // 默认选中时调用接口

						// 创建图片元素
						const imgElement = document.createElement('img');
						imgElement.src = 'picture/shoushudao.png'; // 设置图片路径
						imgElement.alt = 'Selected Item Icon'; // 设置图片的 alt 属性

						// 创建包含两个空格的文本节点
						const spaceNode = document.createTextNode('');

						// 将图片元素和文本节点插入到选中的项中
						listItem.insertBefore(imgElement, listItem.firstChild); // 将图片插入到第一个子节点之前
						listItem.insertBefore(spaceNode, imgElement.nextSibling); // 将空格插入到图片之后
					}
				});

				//加载右侧box

			}
		}
	</script>

	<script>
		//清空页面数据
		function clearRightBox() {
			// 清空左侧列表
			const dynamicList = document.getElementById('dynamic-list');
			dynamicList.innerHTML = '';

			// 清空患者信息
			document.querySelector('#patientName').innerHTML = '姓名: &nbsp;&nbsp;&nbsp;--';
			document.querySelector('#patientSex').innerHTML = '性别: &nbsp;&nbsp;&nbsp;--';
			document.querySelector('#patientId').innerHTML = '住院号: &nbsp;&nbsp;&nbsp;--';
			document.querySelector('#patientAge').innerHTML = '年龄: &nbsp;&nbsp;&nbsp;--';

			// 清空医护信息
			document.querySelector('#doctorAn').innerHTML = '麻醉: &nbsp;&nbsp;&nbsp;--';
			document.querySelector('#doctorName').innerHTML = '主刀: &nbsp;&nbsp;&nbsp;--';
			document.querySelector('#tourNurse').innerHTML = '巡回: &nbsp;&nbsp;&nbsp;--';
			document.querySelector('#washNurse').innerHTML = '洗手: &nbsp;&nbsp;&nbsp;--';

			// 清空生命体征
			document.querySelector('#bp').textContent = '--';
			document.querySelector('#hr').textContent = '--';
			document.querySelector('#etco2').textContent = '--';
			document.querySelector('#spo2').textContent = '--';
			document.querySelector('#SignTextSJ').textContent = '--';

			// 清空手术信息
			document.querySelector('#operName').textContent = '--该手术室暂无手术--';
			document.querySelector('#sequenceOper').textContent = '--';

			// 清空时长信息
			document.querySelector('#boxRightTimeOpId').innerHTML = '手术时长&nbsp;&nbsp;&nbsp--:--:--';
			document.querySelector('#boxRightTimeAnId').innerHTML = '麻醉时长&nbsp;&nbsp;&nbsp--:--:--';

			// 清空进度条
			document.getElementsByClassName('percent')[0].style.width = '0';
			document.querySelectorAll('.step').forEach(e => {
				e.classList.remove('selected', 'completed');
			});

			// 清空进度时间
			for (let i = 1; i <= 7; i++) {
				document.querySelector(`.boxRightProcessTimeDiv${i}`).textContent = '';
			}

			// 清空事件广场
			document.querySelector('#squareDiv').innerHTML = '<div class="no-data-message">暂无记录</div>';

			// 清除计时器
			clearInterval(timerId);
			clearInterval(timerId2);

			// 清空全局数据
			globalData = {};

			// 显示无数据提示
			document.getElementById('loading3').style.display = 'block';
			document.getElementById('loading2').style.display = 'none';


		}
	</script>

	<!-- 到底置顶 没生效 -->
	<script>
		const squareDiv = document.getElementById('squareDiv');
		squareDiv.addEventListener('scroll', function () {
			if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
				this.scrollTop = 0;
			}
		});
	</script>




</body>

</html>